<template>
    <div class="centerBox">
        <div class="cenT">
            <div class="topL">
                <ul class="chapList">
                    <li
                        class="chapItem"
                        v-for="(item, index) in CityTransactionSituation"
                        :key="index"
                    >
                        <p class="itemName">{{ item.key }}</p>
                        <p class="itemVal">{{ item.value }}</p>
                    </li>
                </ul>
                <div
                    class="openIcon"
                    style="right: -10px; top: 1px"
                    @click="openInfo('市区成交情况', false)"
                    v-if="CityTransactionSituation.length"
                >
                    <img src="@/assets/home/start.png" alt="" />
                </div>
            </div>
            <div class="map-container">
                <div :id="id" ref="myEchart" class="map-chart"></div>
            </div>
            <div class="reset" @click="renderMap('浙江省')"></div>
            <div class="refresh">
                <el-button
                    type="text"
                    icon="el-icon-refresh"
                    @click="refreshChange()"
                    >重置</el-button
                >
            </div>
        </div>
        <div class="cenC">
            <ul class="boxArr">
                <li class="boxLi">
                    <p class="boxT">挂牌金额</p>
                    <p class="boxB">
                        {{ numberFormat(topD.index1).value }}
                        {{ numberFormat(topD.index1).unit }}
                    </p>
                </li>
                <li class="boxLi">
                    <p class="boxT">挂牌量</p>
                    <p class="boxB">{{ topD.index2 }}</p>
                </li>
                <li class="boxLi">
                    <p class="boxT">成交金额</p>
                    <p class="boxB">
                        {{ numberFormat(topD.index3).value }}
                        {{ numberFormat(topD.index3).unit }}
                    </p>
                </li>
                <li class="boxLi">
                    <p class="boxT">成交量</p>
                    <p class="boxB">{{ topD.index4 }}</p>
                </li>
                <li class="boxLi">
                    <p class="boxT">成交率</p>
                    <p class="boxB">{{ topD.index5 }}</p>
                </li>
                <li class="boxLi">
                    <p class="boxT">手续费</p>
                    <p class="boxB">
                        {{ numberFormat(topD.index6).value }}
                        {{ numberFormat(topD.index6).unit }}
                    </p>
                </li>
                <li class="boxLi">
                    <p class="boxT">增值额</p>
                    <p class="boxB">
                        {{ numberFormat(topD.index7).value }}
                        {{ numberFormat(topD.index7).unit }}
                    </p>
                </li>
            </ul>
        </div>
        <div class="cenB">
            <ul class="chartArr">
                <li class="chartLi">
                    <div class="chart-box">
                        <div class="chart-box-title">交易费率</div>
                        <div class="box-arr">
                            <div class="box-l">
                                <div class="chart-mini-box">
                                    <div class="chart-mini-title">
                                        交易费
                                        <div
                                            class="openIcon"
                                            style="right: -15px; top: -4px"
                                            @click="openInfo('交易费率', false)"
                                        >
                                            <img
                                                src="@/assets/home/start.png"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                    <div class="chart-mini-chart">
                                        <!-- <div
                                            id="centerChart2"
                                            style="width: 100%; height: 150px"
                                        ></div> -->
                                        <div class="datavBox">
                                            <ul class="chartDatavEL">
                                                <li
                                                    v-for="(
                                                        item, index
                                                    ) in config2.data"
                                                    :key="index"
                                                    @click="
                                                        changeFee(item.name)
                                                    "
                                                    style="cursor: pointer"
                                                >
                                                    <div
                                                        class="radiu"
                                                        :style="{
                                                            'background-color':
                                                                config2.color[
                                                                    index
                                                                ]
                                                        }"
                                                    ></div>
                                                    <p>{{ item.name }}</p>
                                                </li>
                                            </ul>
                                            <dv-active-ring-chart
                                                :config="config2"
                                                style="
                                                    width: 100px;
                                                    height: 150px;
                                                "
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-r">
                                <div class="chart-mini-box">
                                    <div class="chart-mini-title">
                                        TOP交易费
                                        <div
                                            class="openIcon"
                                            style="right: -30px; top: -4px"
                                            @click="openInfo('TOP交易费', true)"
                                        >
                                            <img
                                                src="@/assets/home/start.png"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                    <ul class="tableList">
                                        <li
                                            class="itemli"
                                            v-for="(
                                                item, index
                                            ) in TopTransaction"
                                            :key="index"
                                        >
                                            <div class="items">
                                                {{ index + 1 }}
                                            </div>
                                            <p>{{ item.key }}</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="chartLi">
                    <div class="chart-box">
                        <div class="chart-box-title">
                            经办人业绩
                            <div
                                class="openIcon"
                                style="right: -10px; top: 2px"
                                @click="openInfo('经办人业绩', true)"
                            >
                                <img src="@/assets/home/start.png" alt="" />
                            </div>
                        </div>
                        <div
                            id="centerChart3"
                            style="width: 100%; height: 180px"
                        ></div>
                    </div>
                </li>
                <li class="chartLi">
                    <div class="chart-box">
                        <div class="chart-box-title">
                            出入金 <span class="unit">（单位：万元）</span>
                            <div
                                class="openIcon"
                                style="right: -10px; top: 3px"
                                @click="openInfo('出入金', false)"
                            >
                                <img src="@/assets/home/start.png" alt="" />
                            </div>
                        </div>
                        <div
                            id="centerChart4"
                            style="width: 100%; height: 150px"
                        ></div>
                    </div>
                </li>
                <li class="chartLi">
                    <div class="chart-box">
                        <div class="chart-box-title">
                            在挂项目天数 <span class="unit">（单位：天）</span>
                            <div
                                class="openIcon"
                                style="right: -10px; top: 3px"
                                @click="openInfo('在挂项目天数', false)"
                            >
                                <img src="@/assets/home/start.png" alt="" />
                            </div>
                        </div>
                        <!-- <div
                            id="centerChart5"
                            style="width: 100%; height: 150px"
                        ></div> -->
                        <div class="datavBox">
                            <ul class="chartDatavEL">
                                <li
                                    v-for="(item, index) in config5.data"
                                    :key="index"
                                    @click="changeDay(item.name)"
                                    style="cursor: pointer"
                                >
                                    <div
                                        class="radiu"
                                        :style="{
                                            'background-color':
                                                config5.color[index]
                                        }"
                                    ></div>
                                    <p>{{ item.name }}</p>
                                </li>
                            </ul>
                            <dv-active-ring-chart
                                :config="config5"
                                style="width: 200px; height: 150px"
                            />
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
  
  <script>
import * as echarts from 'echarts/lib/echarts'
import 'echarts-gl'
require('echarts/theme/dark')
import zhejiang from '@/assets/map/zhejiang.json'
import hangzhou from '@/assets/map/hangzhou.json'
import huzhou from '@/assets/map/huzhou.json'
import jiaxing from '@/assets/map/jiaxing.json'
import shaoxing from '@/assets/map/shaoxing.json'
import quzhou from '@/assets/map/quzhou.json'
import jinhua from '@/assets/map/jinhua.json'
import taizhou from '@/assets/map/taizhou.json'
import zhoushan from '@/assets/map/zhoushan.json'
import ningbo from '@/assets/map/ningbo.json'
import wenzhou from '@/assets/map/wenzhou.json'
import lishui from '@/assets/map/lishui.json'
import { screenMidData } from '@/api/home.js'
export default {
    props: {
        paramsData: {
            type: Object,
            default: {
                city: '',
                area: '',
                operator: '',
                fromDate: '2023-01-01',
                toDate: '2023-12-31',
                year: '',
                month: '',
                customer: '',
                listedAmount: '',
                transactionAmount: '',
                fee: '',
                bid: '',
                bidTop: '',
                day: '',
                returningCustomer: '',
                page: '',
                pageSize: ''
            }
        }
    },
    watch: {
        paramsData: {
            handler(newVal, oldVal) {
                if (newVal.fromDate == '') {
                    this.$emit('clearDate')
                }
            },
            deep: true,
            immediate: false
        }
    },
    data() {
        return {
            topD: {
                index1: 0,
                index2: 0,
                index3: 0,
                index4: 0,
                index5: 0,
                index6: 0,
                index7: 0
            },
            id: 'echarts_',
            echartObj: null,
            option: {
                tooltip: {
                    show: true,
                    formatter: (params) => {
                        return `<div style="padding:0 12px;width: 137px;
height: 53px;color: #FFFFFF;font-size:12px;">
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >${params.name}</p>
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >${params.value}</p>
                      </div>`
                    },
                    borderColor: 'rgba(17,55,118,0.8)',
                    borderWidth: 1,
                    padding: [5, 0],
                    backgroundColor: 'rgba(17,55,118,0.8)',
                    borderRadius: 10
                },
                visualMap: {
                    // 视觉映射组件

                    // type: 'continuous', 如果需要渐变色，设置type为连续
                    show: true,
                    // inverse: true, // 反转
                    top: '20%',
                    bottom: '0%',
                    right: '0%',
                    textStyle: {
                        fontsize: 12,
                        color: '#fff'
                    },

                    splitList: [
                        // 自定义范围
                        { start: 0, end: 50 },
                        { start: 50, end: 100 },
                        { start: 100, end: 300 },
                        { start: 300, end: 500 },
                        { start: 500 }
                    ],
                    color: [
                        // '#0E305B',
                        // '#004082',
                        // '#005FB9',
                        // '#0079C9',
                        '#0A9DFF',
                        '#0079C9',
                        '#005FB9',
                        '#004082',
                        '#0E305B'
                    ] //自定义范围的颜色
                },

                series: {
                    name: '浙江',
                    type: 'map3D',
                    map: '浙江省', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
                    regionHeight: 1.5, //模型的高度
                    boxWidth: 70, //三维地图在三维场景中的宽度
                    //boxHeight:50,
                    boxDepth: 60, //三维地图在三维场景中的深度
                    top: '-6%',
                    left: '0%',
                    bottom: '0%',
                    label: {
                        show: true, //是否显示标签。
                        position: ['50%', '50%'],
                        formatter: (params) => {
                            params.name
                        },
                        color: 'rgba(255,255,255,0.65)', //地图初始化区域字体颜色
                        fontSize: 12,
                        opacity: 1,
                        backgroundColor: '#1B212B ',
                        backgroundColor: '#1B212B ',
                        borderColor: '#998484',
                        borderWidth: 1,
                        position: 'insideTop',
                        padding: 4,
                        borderRadius: 2,
                        distance: 0
                    },
                    itemStyle: {
                        //静态模式下显示的默认样式
                        borderWidth: 1.6,
                        borderColor: '#95FFFF',
                        // borderColor: '#E2B191',
                        // color: '#12386A' //阴影效果
                        // color: '#3857E3' //阴影效果
                        color: 'rgba(0,0,0,0.01)' //阴影效果
                    },
                    emphasis: {
                        // 鼠标移上去的样式
                        borderWidth: 1.6,
                        borderColor: '#95FFFF',
                        color: '#1638D5',
                        textStyle: {
                            // color:'blue'
                        }
                    },
                    viewControl: {
                        //用于鼠标的旋转，缩放等视角控制。
                        autoRotate: false, //是否开启视角绕物体的自动旋转查看
                        autoRotateAfterStill: 1,
                        distance: 68, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
                        minAlpha: 40, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 120, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                    data: []
                }
            },
            city: {
                浙江: 'zhejiang',
                杭州市: hangzhou,
                湖州市: huzhou,
                嘉兴市: jiaxing,
                绍兴市: shaoxing,
                衢州市: quzhou,
                金华市: jinhua,
                台州市: taizhou,
                舟山市: zhoushan,
                宁波市: ningbo,
                温州市: wenzhou,
                丽水市: lishui
            },
            isProvince: true,

            centerChart2: null,
            centerChart3: null,
            centerChart4: null,
            centerChart5: null,
            TopTransaction: [],
            CityTransactionSituation: [],
            config2: {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#8C03E7',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#FFC94B'
                ],
                data: [],
                lineWidth: 15,
                radius: '68%',
                activeRadius: '78%',
                digitalFlopStyle: {
                    fontSize: 12,
                    fill: '#fff'
                }
            },
            config5: {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#8C03E7',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#FFC94B'
                ],
                data: [],
                lineWidth: 15,
                radius: '60%',
                activeRadius: '68%',
                digitalFlopStyle: {
                    fontSize: 12,
                    fill: '#fff'
                }
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.centerChartgetall()
        })
    },
    methods: {
        centerChartgetall() {
            screenMidData(this.paramsData).then((res) => {
                let resData = res.data
                this.topD = { ...resData.Index }
                this.CityTransactionSituation = resData.CityTransactionSituation
                // let chartsPie2 = resData.TransactionRate.TransactionRate.map(
                //     (item) => {
                //         return {
                //             name: item.key,
                //             value: item.value
                //         }
                //     }
                // )
                // this.drawcenterChart2(chartsPie2)
                this.config2.data = resData.TransactionRate.TransactionRate.map(
                    (item) => {
                        return {
                            name: item.key,
                            value: item.value
                        }
                    }
                )
                this.config2 = { ...this.config2 }
                this.TopTransaction = resData.TransactionRate.TopTransaction
                this.drawcenterChart3(
                    resData.Operator.line.xAxis,
                    resData.Operator.line.series
                )
                this.drawcenterChart4(
                    resData.Cash.line.xAxis,
                    resData.Cash.line.series
                )
                // let chartsPie5 = resData.HangingProjects.map((item) => {
                //     return {
                //         name: item.key,
                //         value: item.value
                //     }
                // })
                // this.drawcenterChart5(chartsPie5)
                this.config5.data = resData.HangingProjects.map((item) => {
                    return {
                        name: item.key,
                        value: item.value
                    }
                })
                this.config5 = { ...this.config5 }
                this.option.series.data = resData.City.map((item) => {
                    return {
                        name: item.key,
                        value: item.value
                    }
                })

                if (this.echartObj == null) {
                    this.echartObj = echarts.init(
                        document.getElementById(this.id)
                    )
                    echarts.registerMap('浙江省', zhejiang)
                    this.echartObj.setOption(this.option, true)
                    this.echartObj.on('click', (e) => {
                        // if (this.isProvince) this.renderMap(e.name)
                        this.renderMap(e.name)
                    })
                    window.addEventListener('resize', () => {
                        if (this.echartObj && this.echartObj.resize) {
                            this.echartObj.resize()
                        }
                    })
                } else {
                    this.echartObj.clear()
                    this.echartObj.setOption(this.option, true)
                }
            })
        },
        renderMap(name) {
            console.log(name, this.city[name])
            if (this.isProvince) {
                this.paramsData.city = name != '浙江省' ? name : ''
            } else {
                this.paramsData.area = name != '浙江省' ? name : ''
                if (name == '浙江省') {
                    this.paramsData.city = ''
                }
            }

            this.$emit('allChangeData', this.paramsData)
            if (name != '浙江省' && name) {
                this.option.series.viewControl.distance = 68
                this.isProvince = false
                echarts.registerMap(name, this.city[name]) //获取对应的json数据,最主要的
                this.echartObj.clear()
                this.option.series.map = name
                // this.echartObj.setOption(this.option, true)
            } else {
                this.option.series.viewControl.distance = 68
                this.isProvince = true
                this.echartObj.clear()
                this.option.series.map = '浙江省'
                // this.echartObj.setOption(this.option, true)
            }
        },
        drawcenterChart2(chartsPie) {
            this.centerChart2 = this.$echarts.init(
                document.getElementById('centerChart2')
            )
            let option = {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#493FEE',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#D4CC40'
                ],
                tooltip: {
                    //悬浮提示内容
                    trigger: 'item'
                },

                legend: {
                    //图例文字
                    orient: 'vertical',
                    top: '10%',
                    left: '10%',
                    icon: 'circle', //这个字段控制形状
                    itemGap: 3, //设置间距
                    itemHeight: 10,
                    itemWidth: 10,
                    textStyle: {
                        //图例文字的样式
                        color: '#424F65',
                        fontSize: 12,
                        fontWeight: 400,
                        rich: {
                            //这里面的 a、b 是在formatter中定义的
                            a: {
                                width: 40,
                                fontSize: 10,
                                fontWeight: 700,
                                color: '#e9e6e6'
                            },
                            b: {
                                width: 60,
                                fontSize: 12,
                                fontWeight: 700,
                                align: 'right',
                                color: '#3EF771'
                            }
                        }
                    },
                    // 重写legend显示样式 legend显示内容
                    formatter: function (name) {
                        let data = option.series[0].data
                        let total = 0
                        let tarValue = 0
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        let p = ((tarValue / total) * 100).toFixed(2)
                        return ['{a|' + name + '}']
                    }
                },
                series: [
                    {
                        name: '提示：',
                        type: 'pie',
                        radius: ['38%', '65%'],
                        center: ['75%', '50%'], //环形图--显示位置
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function () {
                                    return ' '
                                },
                                textStyle: {
                                    fontSize: 17,
                                    color: '#666'
                                }
                            }
                        },
                        itemStyle: {
                            borderColor: '#1b2037',
                            borderWidth: 3
                        },
                        data: chartsPie
                    }
                ]
            }

            this.centerChart2.setOption(option)
        },
        drawcenterChart3(xAxis, series) {
            this.centerChart3 = this.$echarts.init(
                document.getElementById('centerChart3')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    }
                },
                grid: {
                    show: false,
                    top: '20%', // 一下数值可为百分比也可为具体像素值
                    right: '13%',
                    bottom: '32%',
                    left: '14%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: 'rgba(51, 167, 240, 1)'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: 'rgba(251, 204, 0, 1)'
                            }
                        },
                        {
                            name: series[2].name,
                            itemStyle: {
                                color: 'rgba(251, 204, 233, 1)'
                            }
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)'
                    },
                    itemWidth: 10,
                    itemHeight: 10
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            color: '#AFAFAF',
                            interval: 0, // 横轴信息全部显示
                            rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量（个）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },

                        axisLabel: {
                            color: 'rgba(175, 175, 175, 1)' // y 轴标注颜色
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'solid', // 虚线
                                color: 'rgba(53, 65, 91, 0.6)'
                            },
                            show: true
                        }
                    },
                    {
                        type: 'value',
                        name: '金额（万）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },

                        axisLabel: {
                            color: 'rgba(175, 175, 175, 1)' // y 轴标注颜色
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed', // 虚线
                                color: 'rgba(255, 255, 255, 0.15)'
                            },
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(89, 160, 215, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(66, 55, 123, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(223, 164, 120, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(66, 55, 123, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[2].name,
                        type: 'line',
                        showSymbol: true,
                        symbol: 'circle', // 折点设定为实心点
                        symbolSize: 7, // 设定实心点的大小
                        itemStyle: {
                            color: '#FDC049',
                            shadowColor: '#edd9b3',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            shadowColor: '#FDC049',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1,
                            shadowBlur: 4,
                            type: 'solid',
                            width: 1
                        },
                        yAxisIndex: 1,
                        data: series[2].data
                    }
                ]
            }

            this.centerChart3.setOption(option)
            this.centerChart3.on('click', this.handleClick3)
        },
        drawcenterChart4(xAxis, series) {
            this.centerChart4 = this.$echarts.init(
                document.getElementById('centerChart4')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    }
                },
                grid: {
                    show: false,
                    top: '15%', // 一下数值可为百分比也可为具体像素值
                    right: '13%',
                    bottom: '32%',
                    left: '16%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: 'rgba(51, 167, 240, 1)'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: 'rgba(251, 204, 0, 1)'
                            }
                        }
                    ],
                    bottom: '3%',
                    left: 'center',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)'
                    },
                    itemWidth: 10,
                    itemHeight: 10
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            color: '#AFAFAF',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',

                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },

                        axisLabel: {
                            color: 'rgba(175, 175, 175, 1)' // y 轴标注颜色
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'solid', // 虚线
                                color: 'rgba(53, 65, 91, 0.6)'
                            },
                            show: true
                        }
                    },
                    {
                        type: 'value',

                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },

                        axisLabel: {
                            color: 'rgba(175, 175, 175, 1)' // y 轴标注颜色
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed', // 虚线
                                color: 'rgba(255, 255, 255, 0.15)'
                            },
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(89, 160, 215, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(66, 55, 123, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(223, 164, 120, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(66, 55, 123, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8
                    }
                ]
            }

            this.centerChart4.setOption(option)
        },
        drawcenterChart5(chartsPie) {
            this.centerChart5 = this.$echarts.init(
                document.getElementById('centerChart5')
            )
            let option = {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#493FEE',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#D4CC40'
                ],
                tooltip: {
                    //悬浮提示内容
                    trigger: 'item'
                },
                legend: {
                    //图例文字
                    orient: 'vertical',
                    top: '10%',
                    left: '20%',
                    icon: 'circle', //这个字段控制形状
                    itemGap: 10, //设置间距
                    itemHeight: 10,
                    itemWidth: 10,
                    textStyle: {
                        //图例文字的样式
                        color: '#424F65',
                        fontSize: 14,
                        fontWeight: 700,
                        rich: {
                            //这里面的 a、b 是在formatter中定义的
                            a: {
                                width: 50,
                                fontSize: 12,
                                fontWeight: 400,
                                color: '#e9e6e6'
                            },
                            b: {
                                width: 60,
                                fontSize: 12,
                                fontWeight: 700,
                                align: 'right',
                                color: '#3EF771'
                            }
                        }
                    },
                    // 重写legend显示样式 legend显示内容
                    formatter: function (name) {
                        let data = option.series[0].data
                        let total = 0
                        let tarValue = 0
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        let p = ((tarValue / total) * 100).toFixed(2)
                        // return [
                        //     '{a|' +
                        //         name +
                        //         '}{b|' +
                        //         (p ? parseFloat(p) : 0) +
                        //         '%}'
                        // ]
                        return ['{a|' + name + '}']
                    }
                },
                series: [
                    {
                        name: '提示：',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['60%', '50%'], //环形图--显示位置
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function () {
                                    return ' '
                                },
                                textStyle: {
                                    fontSize: 17,
                                    color: '#666'
                                }
                            }
                        },
                        itemStyle: {
                            borderColor: '#1b2037',
                            borderWidth: 3
                        },
                        data: chartsPie
                    }
                ]
            }

            this.centerChart5.setOption(option)
        },
        // 转换单位
        numberFormat(val) {
            let value = val - 0
            let param = {}
            let k = 10000
            let sizes = ['', '万', '亿', '万亿']
            let i = 0
            if (value < k) {
                param.value = value
                param.unit = ''
            } else {
                i = Math.floor(Math.log(value) / Math.log(k))
                param.value = (value / Math.pow(k, i)).toFixed(2)
                param.unit = sizes[i]
            }
            return param
        },
        changeFee(name) {
            if (this.paramsData.fee) {
                this.paramsData.fee = ''
            } else {
                this.paramsData.fee = name
            }
            this.$emit('allChangeData', this.paramsData)
        },
        changeDay(name) {
            if (this.paramsData.day) {
                this.paramsData.day = ''
            } else {
                this.paramsData.day = name
            }
            this.$emit('allChangeData', this.paramsData)
        },
        handleClick3(params) {
            if (this.paramsData.operator) {
                this.paramsData.operator = ''
            } else {
                this.paramsData.operator = params.name
            }

            this.$emit('allChangeData', this.paramsData)
        },
        // 过滤月份数据01 02
        getMonthstr(str) {
            let numberS = str.match(/\d+/)[0]
            return numberS.length > 1 ? numberS : '0' + numberS
        },
        // 重置
        refreshChange() {
            this.paramsData.city = ''
            this.paramsData.area = ''
            this.paramsData.operator = ''
            this.paramsData.fromDate = ''
            this.paramsData.toDate = ''
            this.paramsData.year = ''
            this.paramsData.month = ''
            this.paramsData.customer = ''
            this.paramsData.listedAmount = ''
            this.paramsData.transactionAmount = ''
            this.paramsData.fee = ''
            this.paramsData.bid = ''
            this.paramsData.bidTop = ''
            this.paramsData.day = ''
            this.paramsData.returningCustomer = ''
            this.paramsData.page = 1
            this.paramsData.pageSize = 10

            this.renderMap('浙江省')
        },
        // 打开详情
        openInfo(name, isSroll) {
            this.$emit('openInfo', name, isSroll)
        }
    },
    beforeDestroy() {
        if (this.centerChart2) {
            this.centerChart2.off('click', this.handleClick2)
            this.centerChart2.dispose()
        }
    }
}
</script>
  
  <style scoped lang='scss'>
.centerBox {
    width: 100%;
    vertical-align: top;
    position: relative;
    p {
        padding: 0;
        margin: 0;
    }
    .cenT {
        height: 433px;
        width: 100%;
        display: flex;
        position: relative;
        .reset {
            width: 67px;
            height: 67px;
            position: absolute;
            right: 20px;
            bottom: 30px;
            background-image: url('../../../assets/home/centerWorld.png');
            background-size: 100%;
            cursor: pointer;
            z-index: 999;

            &:hover {
                animation: lafer 2s;
                animation-iteration-count: infinite;
            }
        }
        .refresh {
            position: absolute;
            right: 20px;
            top: 30px;
            cursor: pointer;
            z-index: 999;
            font-size: 15px;
        }
        .topL {
            width: 140px;
            margin-top: 28px;
            position: relative;
            .chapList {
                width: 100%;
                .chapItem {
                    display: flex;
                    align-items: center;
                    width: 140px;
                    height: 32px;
                    position: relative;
                    background-image: url('../../../assets/home/centerB.png');
                    background-size: 100%;
                    font-size: 15px;
                    line-height: 32px;
                    font-weight: bold;

                    color: #ffffff;
                    .itemName {
                        margin-left: 15px;
                    }
                    .itemVal {
                        margin-left: 4px;
                    }
                    &::before {
                        content: '';
                        width: 7px;
                        height: 7px;
                        display: block;
                        background-image: url('../../../assets/home/mart.png');
                        background-size: 100%;
                        position: absolute;
                        top: 13px;
                        left: 2px;
                    }
                }
            }
        }
        .map-container {
            width: 673px;
            background: transparent;
            position: relative;
            z-index: 999;
            .map-chart {
                position: absolute;
                left: 0;
                z-index: 5;
                height: 100%;
                width: calc(100% - 20px);
                // animation: shake; /*动画名称*/
                // animation-timing-function: linear;
                // animation-duration: 2; /*动画持续时间*/
                // -webkit-animation: shake 3s; /*针对webkit内核*/
            }
        }
    }
    .cenC {
        width: 100%;
        height: 54px;
        .boxArr {
            display: flex;
            .boxLi {
                width: 116px;
                height: 54px;
                background-image: url('../../../assets/home/cbox.png');
                background-size: 100%;
                text-align: center;
                .boxT {
                    font-size: 12px;
                    color: #7cc2dc;
                    line-height: 16px;
                    margin-bottom: 2px;
                    margin-top: 8px;
                }
                .boxB {
                    font-size: 17px;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 23px;
                }
            }
        }
    }
    .cenB {
        margin-top: 15px;
        .chartArr {
            height: 435px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;
            .chartLi {
                width: 399px;
                height: 200px;
                &:nth-of-type(1) {
                    height: 220px;
                }
                &:nth-of-type(2) {
                    height: 220px;
                }
            }
        }
        .chart-box {
            width: 100%;
            background-size: cover;
            height: 100%;
            position: relative;
            overflow: hidden;
            background: rgba(30, 39, 75, 0.6);
            box-sizing: border-box;
            padding-top: 38px;
            &-title {
                width: 363px;
                height: 33px;
                background-image: url('../../../assets/home/maxT.png');
                background-size: 100%;
                position: absolute;
                left: 0;
                top: 0;
                font-weight: bold;
                color: #ffffff;
                line-height: 30px;
                font-size: 15px;
                text-indent: 34px;
                .unit {
                    font-size: 13px;
                    font-weight: 400;
                    font-style: italic;
                }
            }
            .chart-mini-box {
                position: relative;
                .chart-mini-title {
                    width: 88px;
                    height: 21px;
                    background-image: url('../../../assets/home/minT.png');
                    background-size: 100%;
                    line-height: 21px;
                    text-align: center;
                    margin: auto;
                    font-size: 12px;
                    font-weight: bold;
                    color: #ffffff;
                    position: relative;
                    &::before {
                        content: '';
                        width: 7px;
                        height: 7px;
                        display: block;
                        background-image: url('../../../assets/home/mart.png');
                        background-size: 100%;
                        position: absolute;
                        top: 7px;
                        left: 2px;
                    }
                }
                .start {
                    width: 20px;
                    height: 20px;
                    background-image: url('../../../assets/home/start.png');
                    position: absolute;
                    top: 2px;
                    right: 2px;
                }
            }
        }
        .box-arr {
            display: flex;
            justify-content: space-between;
            .box-l {
                width: 49%;
            }
            .box-r {
                width: 49%;
            }
        }
        .tableList {
            // margin-top: 10px;
            width: 90%;
            margin: 15px auto 0;
            .itemli {
                display: flex;
                font-size: 14px;
                color: #92d4e0;
                height: 40px;
                align-items: center;
                line-height: 20px;
                margin-bottom: 5px;
                .items {
                    width: 24px; /* 设置正方形的宽度 */
                    height: 18px; /* 设置正方形的高度 */
                    position: relative; /* 为了让伪元素相对于该容器定位 */
                    // text-shadow: 2px 2px 2px rgba(70, 206, 226, 0.5);
                    text-align: center;
                    line-height: 18px;
                    font-size: 14px;
                    color: #49dcee;
                    font-weight: bold;
                    margin-right: 5px;
                    background: radial-gradient(
                        circle at center,
                        #3a484a,
                        transparent
                    );
                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 7px;
                        height: 7px;
                        content: '';
                        border-left: 1px solid #49dcee;
                        border-top: 1px solid #49dcee;
                    }

                    &::after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 7px;
                        height: 7px;
                        content: '';
                        border-right: 1px solid #49dcee;
                        border-bottom: 1px solid #49dcee;
                    }
                }
                &:nth-of-type(1) {
                    color: #e7ebc2;
                    .items {
                        color: #fdd473;

                        background: radial-gradient(
                            circle at center,
                            #3a484a,
                            transparent
                        );
                        &::before {
                            border-left: 1px solid #fdd473;
                            border-top: 1px solid #fdd473;
                        }

                        &::after {
                            border-right: 1px solid #fdd473;
                            border-bottom: 1px solid #fdd473;
                        }
                    }
                }
                &:nth-of-type(2) {
                    color: #cebab6;
                    .items {
                        color: #eb9f70;

                        background: radial-gradient(
                            circle at center,
                            #3a484a,
                            transparent
                        );
                        &::before {
                            border-left: 1px solid #eb9f70;
                            border-top: 1px solid #eb9f70;
                        }

                        &::after {
                            border-right: 1px solid #eb9f70;
                            border-bottom: 1px solid #eb9f70;
                        }
                    }
                }
            }
        }
    }
    .datavBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .chartDatavEL {
        li {
            display: flex;
            font-size: 11px;
            color: #ffffff;
            line-height: 18px;
            align-items: center;
            transition: transform 0.3s ease;
            &:hover {
                transform: scale(1.3);
            }
            .radiu {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin-right: 6px;
            }
        }
    }
}
@keyframes lafer {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    100% {
        transform: scale(1.5);
        opacity: 1;
    }
}
@keyframes shake {
    0% {
        transform: scale(0);
        transform: rotate3d(1, 1, 1, 360deg);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform: rotate3d(1, 1, 1, 0deg);
        opacity: 1;
    }
}
@-webkit-keyframes shake {
    0% {
        transform: scale(0);
        transform: rotate3d(1, 1, 1, 360deg);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform: rotate3d(1, 1, 1, 0deg);
        opacity: 1;
    }
}
.bottomContainer {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
}

.bottomLeft {
    width: 430px;
    span {
        margin-left: 95px;
        font-size: 17px;
        img {
            padding-top: 2px;
        }
    }
}

.bottomRight {
    width: 360px;
    height: 180px;
    overflow: hidden;
    box-sizing: border-box;
    .messageBox {
        overflow: hidden;
        margin: auto;
    }
    span {
        margin-left: 5px;
        font-size: 17px;
        img {
            padding-top: 2px;
        }
    }
}

.anim {
    transition: all 1s;
    margin-top: -102px;
}
</style>
  